<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-08-29 09:51:29
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-08-07 15:46:32
 * @FilePath: /things-admin/src/view/dataScreen/dataScreen.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container" @click="clickDoc">
    <div class="box" ref="screen">
      <!-- 头部 -->
      <Header />
      <!-- 头部 -->

      <!-- 中间部分 -->
      <div class="main" >
        <MiddleLeft :provinceId="selectTwo" :cityId="selectThree" :name="selectIcon" :key="refreshKey"/>
        <div class="main_middle">
          <div class="header_search" id="searchBtn">
            <Select
              :width="260"
              :height="31.5"
              :num="showNum"
              :optionList="optionOne"
              @change="changeValue"
              :id="1"
              :placeholder="placeholderOne"
              :Show="Show"
              :isClear="isClear"
            />
            <span></span>
            <Select
              :width="260"
              :height="31.5"
              :num="showNum"
              :optionList="optionTwo"
              @change="changeValue"
              :id="2"
              :placeholder="placeholderTwo"
              :Show="Show"
              :isClear="isClear"
            />
            <span></span>
            <Select
              :width="260"
              :height="31.5"
              :num="showNum"
              :optionList="optionThree"
              @change="changeValue"
              :id="3"
              :placeholder="placeholderThree"
              :Show="Show"
              :isClear="isClear"
            />
           
            <img
              src="./images/3493@2x.png"
              alt=""
              class="search_icon"
              @click="searchLoc"
            />
            <img
              src="./images/zhongzhi.png"
              alt=""
              class="reset_icon"
              @click="resetIcon"
            />
          </div>
          <div class="map" >
            <div id="echarts_nine"></div>
          </div>
        </div>
        <div class="main_right" :key="refreshKey">
          <Top :provinceId="selectTwo" :cityId="selectThree" :name="selectIcon"/>
          <Middle :provinceId="selectTwo" :cityId="selectThree" :name="selectIcon"/>
        </div>
      </div>
      <!-- 中间部分 -->

      <!-- 底部 -->
      <div class="footer" :key="refreshKey">
        <FooterLeft  :provinceId="selectTwo" :cityId="selectThree" :name="selectIcon"/>
        <FooterMiddle  :provinceId="selectTwo" :cityId="selectThree" :name="selectIcon"/>
        <FooterRight :provinceId="selectTwo" :cityId="selectThree" :name="selectIcon"/>
      </div>
      <!-- 底部 -->
    </div>
  </div>
</template>

<script>
import Select from "./components/select";
import Top from "./components/middle_right/top";
import Middle from "./components/middle_right/middle";
import FooterLeft from "./components/footer/footer_left";
import FooterMiddle from "./components/footer/footer_middle";
import FooterRight from "./components/footer/footer_right";
import Header from "./components/header/header";
import MiddleLeft from "./components/middle_left/middleleft";
import {
  provincialStatistics,
  region,
  getProvince,
  getCity,
} from "@/base/api/DataScreen.ts";
export default {
  components: {
    Select,
    Top,
    Middle,
    FooterLeft,
    FooterMiddle,
    FooterRight,
    Header,
    MiddleLeft,
  },
  data() {
    return {
      zl: 0, //缩放比
      size: "",
      refreshKey: 0,
      searchName: "",
      timer: null,
      isClear: false,
      Show: 0,
      data: [],
      // 选择器部分
      optionOne: [],
      optionTwo: [],
      optionThree: [],
      searchPri: "",
      isvaluethree: true,
      isvaluetwo: true,
      isvalueone: true,
      showNum: 0,
      selectOne: "", //区域id
      selectTwo: "",
      selectThree: "",
      placeholderOne: "选择区域",
      placeholderTwo: "选择省份",
      placeholderThree: "选择城市",
      selectIcon:'',
      isClear: false
    };
    // 选择器部分
  },
  watch:{
    searchName(newval){
      this.searchName = newval
    },
    selectTwo(newval){
      this.selectTwo = newval
    },
    selectThree(newval){
      this.selectThree = newval
    }
  },
  methods: {
    //全局点击事件
    clickDoc() {
      this.showNum = Math.random();
    },
    //获取大区数据
    getRegion() {
      region().then((res) => {
        // console.log(res);
        this.optionOne = [];
        res.data.forEach((item) => {
          let obj = {};
          obj.value = item.regionId;
          obj.label = item.region;
          this.optionOne.push(obj);
        });
      });
    },
    // 获取省份数据
    getProvince(id) {
      this.optionTwo = [];
      getProvince(id).then((res) => {
        res.data.forEach((item) => {
          let obj = {};
          obj.value = item.id;
          obj.label = item.name;
          this.optionTwo.push(obj);
        });
      });
    },
    //获取对应城市
    getCity(regionId, provinceId) {
      this.optionThree = [];
      getCity(regionId, provinceId).then((res) => {
        res.data.forEach((item) => {
          let obj = {};
          obj.value = item.id;
          obj.label = item.name;
          this.optionThree.push(obj);
        });
      });
    },
    // 搜索对应的城市
    searchLoc() {
      this.searchName = "";
      if (!this.selectOne) {
        // console.log("请选择区域");
      } else if (!this.selectTwo && this.selectOne) {
        // console.log("请选择省份");
      } else if (this.selectTwo && this.selectOne && !this.selectThree) {
        this.selectIcon =  this.searchPri
        this.searchName = this.searchPri;
        this.provincialStatistics();
        // console.log("请选择城市");
      } else if (this.selectTwo && this.selectOne && this.selectThree) {
        this.searchName = this.searchPri;
        this.provincialStatistics();
        this.selectIcon =  this.searchPri + Math.random()
      }
    },
    // 选择器选择的值
    changeValue(id, data, label) {
      this.Show = id;
      // console.log(id, data, label, "选择器改变了");
      if (id == 1) {
        this.selectThree = ''
        this.optionTwo = [];
        this.optionThree = [];
        this.selectOne = data;
        this.getProvince(this.selectOne);
      } else if (id == 2) {
        this.selectThree =''
        this.optionThree = [];
        this.selectTwo = data;
        this.getCity(this.selectOne, this.selectTwo);
        if (label.split("").includes("市")) {
          this.searchPri = label.slice(0, -1);
        } else if (label.split("").includes("省")) {
          this.searchPri = label.slice(0, -1);
        }  else{
          switch(label){
            case '新疆维吾尔自治区':
            this.searchPri = label.slice(0, 2);
            break;
            case '广西壮族自治区':
            this.searchPri = label.slice(0, 2);
            break;
            case '宁夏回族自治区':
            this.searchPri = label.slice(0, 2);
            break;
            case '西藏自治区':
            this.searchPri = label.slice(0, 2);
            break;
            case '内蒙古自治区':
            this.searchPri = label.slice(0, 3);
            break;
            default:
            this.searchPri = "";
          }
       }
      } else if (id == 3) {
        this.selectThree = data;
      }
    },

    //获取屏幕缩放比
    getScreen() {
      const ww = window.innerWidth / 1920;
      const wh = window.innerHeight / 1080;
      this.zl = ww < wh ? ww : wh;
    },
    //实现屏幕缩放
    getSize() {
      this.getScreen();
      this.$refs.screen.style.transform = `scale(${this.zl}) translate(-50%, -50%)`;
    },

    //地图
    echartstNine(data) {
      let myChartNine = this.$echarts.init(
        document.getElementById("echarts_nine")
      );

      let option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            // console.log(params);
            // 根据对应的城市获取对应数据
            var dataone = {
              anmo: 0,
              paiming: 0,
              zaixian: 0,
              daiji: 0,
              lixian: 0,
            };
            // console.log(data);
            data.forEach((item) => {
              if (item.province == params.name) {
                dataone.anmo = item.count;
                dataone.paiming = item.number;
                dataone.zaixian = item.online;
                dataone.lixian = item.offline;
              }
            });
            // <div style="color:rgba(0, 160, 233, 1);margin-left:8px;margin-bottom:6px;">待机：${data.daiji}</div>

            return `
                <div style="width:200px;height:163px;background-color:none;font-size:16px">
                <div style="color:rgba(170, 253, 254, 1);margin-left:8px;">${params.name}</div>
                <div style="margin-left:8px;margin-top:8px;margin-bottom:6px;">按摩椅数量：<span style="color:rgba(0, 222, 0, 1)">${dataone.anmo}</span>台</div>
                <div style="margin-left:8px;margin-bottom:6px;">全国排名：<span style="color:rgba(0, 222, 0, 1)">Top${dataone.paiming}</span></div>
                <div style="color:rgba(0, 222, 0, 1);margin-left:8px;margin-bottom:6px;">在线：${dataone.zaixian}台</div>
                <div style="color:rgba(193, 193, 193, 1);margin-left:6px">离线：${dataone.lixian}台</div>
                </div>
                `;
          },
        },
        geo: {
          map: "china", //中国地图
          layoutCenter: ["52%", "55%"],
          layoutSize: "110%",
          selectedMode: "single", // 设置为单选模式
          // 设置数据
          label: {
            show: true,
            fontSize: 14,
            color: "#FFFFFF",
            formatter: function (params) {
              // console.log(params);
            },
          },
          itemStyle: {
            color: "rgba(0,0,0,0)",
            borderWidth: 1.5,
            borderColor: " rgba(55, 118, 173, 0.7)",
          },
          emphasis: {
            //高亮的样式
            itemStyle: {
              color: "rgba(170, 253, 254, 0.5)",
            },
            label: {
              color: "#FFFFFF",
            },
          },
          right: 20,
          regions: [
            {
              name: this.searchName || "",
              itemStyle: {
                color: "rgba(170, 253, 254, 0.5)",
              },
            },
          ],
        },
        series: [
          {
            name: "中国地图",
            type: "map",
            data: this.data,
            geoIndex: 0,
          },
        ],
      };
      myChartNine.setOption(option);
    },
    //按摩椅省份数量
    provincialStatistics() {
      provincialStatistics().then((res) => {
        this.data = [];
        res.data.forEach((item) => {
          //将拿到的数据做处理
          if (item.province.split("").includes("市"))
            item.province = item.province.slice(0, -1);
          if (item.province.split("").includes("省"))
            item.province = item.province.slice(0, -1);
          if (item.province == "新疆维吾尔自治区")
            item.province = item.province.slice(0, 2);
          if (item.province == "广西壮族自治区")
            item.province = item.province.slice(0, 2);
          if (item.province == "宁夏回族自治区")
            item.province = item.province.slice(0, 2);
          if (item.province == "西藏自治区")
            item.province = item.province.slice(0, 2);
          if (item.province == "内蒙古自治区")
            item.province = item.province.slice(0, 3);
          this.data.push(item);
        });

        this.echartstNine(this.data);
      });
    },
    //页面刷新
    refreshPage() {
      this.refreshKey += 1;
      // this.selectTwo = ''
      // this.selectThree = ''
      // this.selectOne = ''
      // this.selectIcon = this.refreshKey++;
      // this.searchName = ''
      // this.searchName = this.selectTwo;
      // this.provincialStatistics();
    },
    resetIcon(){
      this.selectTwo = ''
      this.selectThree = ''
      this.selectOne = ''
      this.selectIcon = this.refreshKey++;
      this.searchName = ''
      this.isClear = !this.isClear;
      this.provincialStatistics();
    }
  },
  watch: {
    Show(newval) {
      this.Show = newval;
    },
  },

  mounted() {
    this.getRegion();
    //十分钟刷新一次页面
    this.timer = setInterval(() => {
      this.refreshPage();
      this.provincialStatistics();
      this.searchName = ''
    }, 1000 * 60 * 10);
    //页面尺寸变化监听
    window.addEventListener("resize", this.getSize);
    // 初始化刷新一次状态
    this.getSize();
    this.provincialStatistics();
  },
  beforeDestroy() {
    //页面尺寸监听事件销毁
    window.removeEventListener("resize", this.getSize);
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: url(./images/bg1.png) no-repeat;
  background-size: cover;
  .box {
    width: 1920px;
    height: 1080px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform-origin: left top;

    .main {
      width: 100%;
      position: relative;
      z-index: 200;
      display: flex;
      flex-direction: row;
      height: 728px;
      margin: 8px 16px;

      .main_right {
        width: 448px;
        margin-right: 32px;
      }
      .main_middle {
        padding-left: 60px;
        flex: 1;
        .header_search {
          width: 100%;
          height: 31.5px;
          margin-top: 8px;
          // background-color: #fff;
          display: flex;
          align-items: center;
          span {
            width: 12px;
            height: 2px;
            background: #d5ffff;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            margin: 0 9px;
          }
          .search_icon {
            width: 31.5px;
            height: 31.5px;
            margin-left: 10.5px;
            cursor: pointer;
          }
          .reset_icon{
            width: 31.5px;
            height: 31.5px;
            margin-left: 10.5px;
            cursor: pointer;
          }
        }
        #echarts_nine {
          width: 810px;
          height: 650px;
          margin: 40px 0 0 30px;
        }
      }
    }
    .footer {
      width: 100%;
      position: relative;
      // z-index: 200;
      display: flex;
      height: 256px;
      margin: 8px 16px;
    }
  }
}
</style>
<style>
/* 修改滚动条样式 */
::-webkit-scrollbar {
  width: 10px; /* 滚动条宽度 */
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.3); /* 滚动条背景颜色 */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(213, 255, 255, 1); /* 滚动条颜色 */
  border-radius: 5px; /* 滚动条圆角 */
}
</style>
